<template>
    <div>
        <ShopHeader></ShopHeader>
        <div class="tab">
            <div class="tab-item">
                <router-link :to="`/shop/${id}/goods`" replace>点餐</router-link>
            </div>
            <div class="tab-item">
                <router-link :to="`/shop/${id}/ratings`" replace>评价</router-link>
            </div>
            <div class="tab-item">
                <router-link :to="`/shop/${id}/info`" replace>商家</router-link>
            </div>
        </div>
        <router-view></router-view>
        <ShopCart v-if="this.$route.meta.goods"></ShopCart>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import ShopHeader from '../../components/ShopHeader/ShopHeader.vue'
    import ShopCart from "../../components/ShopCart/ShopCart";
    import {saveCartFoods} from '../../utils/utils'
    export default {
        components: {
            ShopHeader,
            ShopCart
        },
        props:['id'],
        mounted() {
            //得到当前请求的商家id
            if(this.shop.id!==(this.id-0)){
                this.$store.dispatch("getOneShop",this.id)
            }
            window.addEventListener("unload", ()=>{
                //退出当前商家页面，保存当前商家购物车信息
                saveCartFoods(this.id,this.shopCart)
            })
        },
        computed:{
            ...mapState({
                //根据商家id得到商家信息
                shop:state=>state.shop.shop,
                //得到购物车数组
                shopCart:state=>state.shop.shopCart
            })
        },
        beforeDestroy() {
            //退出当前商家页面，保存当前商家购物车信息
            saveCartFoods(this.id,this.shopCart)
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/minix.styl"
     .tab
        height 40px
        line-height 40px
        background #fff
        bottom-border-1px(rgba(7, 17, 27, 0.1))
        .tab-item
            float left
            width: 33.33333%
            text-align center
            font-size 14px
            color rgb(77, 85, 93)
            a
                display block
                position relative
                &.router-link-active
                    color #02a774
                    &::after
                        content ''
                        position absolute
                        left 50%
                        bottom 1px
                        width 35px
                        height 2px
                        transform translateX(-50%)
                        background #02a774
</style>
